<template>
  <div class="content">
    <div class="top-form">
      <el-select
        v-model="form.smartstatus"
        placeholder="智能设备状态"
        clearable
        v-if="title == 'smart'"
      >
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="form.familystatus"
        placeholder="家居设备状态"
        clearable
        v-else
        class="time"
      >
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        id="daily_create_dt"
        v-model="form.createDt"
        type="daterange"
        align="right"
        start-placeholder="开始日期"
        range-separator="至"
        end-placeholder="结束日期"
        style="margin-left: 10px; width: 21%"
        class="width-full"
      >
      </el-date-picker>

      <el-input
        v-model="form.homenum"
        placeholder="房号"
        style="width: 400px"
        class="fangnum"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="rearch"
        >查询</el-button
      >
    </div>
    <el-tabs type="border-card" v-model="title">
      <el-tab-pane label="智能设备" name="smart">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          text-align="center"
          :header-cell-style="{ 'background-color': '#eee', color: '#000' }"
        >
          <el-table-column prop="unitname" label="单元名称" width="180">
          </el-table-column>
          <el-table-column prop="buildnum" label="幢号" width="180">
          </el-table-column>
          <el-table-column prop="homenum" label="房号"> </el-table-column>
          <el-table-column prop="homename" label="房主"> </el-table-column>
          <el-table-column prop="airnum" label="空调"> </el-table-column>
          <el-table-column prop="wifiname" label="Wi-Fi"> </el-table-column>
          <el-table-column prop="washnum" label="洗衣机"> </el-table-column>
          <el-table-column prop="createtime" label="授权时间" width="180">
            <!-- <template slot-scope="scope">
              {{ scope.row.createtime.split("T")[0] }}
            </template> -->
          </el-table-column>
          <el-table-column prop="smartstatus" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.smartstatus == 1">完好</span>
              <span v-if="scope.row.smartstatus == 2">不完好</span>
            </template>
          </el-table-column>
          <el-table-column label="操作状态">
            <template slot-scope="scope">
              <!-- <el-button type="primary" plain @click="handelDetail(scope.row)"
            >详情</el-button
          >
          <el-button type="danger" plain @click="handelDelete(scope.row)"
            >归档</el-button
          > -->
              <el-tooltip
                :content="'Switch status: ' + scope.row.familystatus"
                placement="top"
              >
                <el-switch
                  v-model="scope.row.familystatus"
                  @change="ShowStatusChangeHouse(scope.row)"
                  :active-value="1"
                  :inactive-value="2"
                >
                </el-switch>
              </el-tooltip>
            </template>
            <!-- <el-switch v-model="value1"> </el-switch> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="家居设备">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          text-align="center"
          :header-cell-style="{ 'background-color': '#eee', color: '#000' }"
        >
          <el-table-column prop="unitname" label="单元名称" width="180">
          </el-table-column>
          <el-table-column prop="buildnum" label="幢号" width="180">
          </el-table-column>
          <el-table-column prop="homenum" label="房号"> </el-table-column>
          <el-table-column prop="homename" label="房主"> </el-table-column>
          <el-table-column prop="homedesk" label="书桌"> </el-table-column>
          <el-table-column prop="homechair" label="椅子"> </el-table-column>
          <el-table-column prop="homeclothes" label="衣柜"> </el-table-column>
          <el-table-column prop="createtime" label="授权时间" width="180">
            <!-- <template slot-scope="scope">
              {{ scope.row.createtime.split("T")[0] }}
            </template> -->
          </el-table-column>
          <el-table-column prop="smartstatus" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.smartstatus == 1">完好</span>
              <span v-if="scope.row.smartstatus == 2">待维修</span>
            </template>
          </el-table-column>
          <el-table-column label="操作状态">
            <template slot-scope="scope">
              <!-- <el-button type="primary" plain @click="handelDetail(scope.row)"
            >详情</el-button
          >
          <el-button type="danger" plain @click="handelDelete(scope.row)"
            >归档</el-button
          > -->
              <el-tooltip
                :content="'Switch status: ' + scope.row.familystatus"
                placement="top"
              >
                <el-switch
                  active-color="#13ce66"
                  v-model="scope.row.familystatus"
                  @change="ShowStatusChangeSmart(scope.row)"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="2"
                >
                </el-switch>
              </el-tooltip>
            </template>
            <!-- <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch> -->
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 使用分页 -->
    <Pagination
      :total="total"
      @SizeChange="changeCount"
      @CurrentChange="changePage"
    >
    </Pagination>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination/Pagination.vue";
export default {
  components: { Pagination },
  data() {
    return {
      total: 0,
      value1: true,
      value: true,
      form: {
        smartstatus: "",
        familystatus: "",
        startDate: "",
        endDate: "",
        createDt: "",
        homenum: "",
        createtime: "",
        currPage: 0,
        pageNum: 10,
      },
      statusList: [
        {
          text: "完好",
          value: "1",
        },
        {
          text: "待维修",
          value: "2",
        },
      ],
      tableList: [],
      tableData: [],
      tableData1: [],
      isok: true,
      page: {
        smartstatus: "",
        familystatus: "",
        homenum: "",
        startDate: "",
        endDate: "",
        currPage: 0,
        pageNum: 10,
        total: 0,
      },
      title: "smart",
    };
  },
  created() {
    this.GetAdd();
  },
  methods: {
    // 渲染页面
    GetAdd() {
      this.$axiosToken({
        url: "/house/searchdeviceList",
        method: "get",
        data: this.page,
        success: (res) => {
          this.tableData = res.data;
          console.log(this.tableData, "喜爱哦住");
          this.total = res.total;
          for (let i = 0; i < res.data.length; i++) {
            let t1 = res.data[i].createtime.split("T");
            let t2 = t1[1].split(".");
            t2 = t2[0].split(":");
            t2[0] = parseInt(t2[0]);
            // t2[0]= parseInt(t2[0])< 10 ? '0' +t2[0] : parseInt(t2[0])
            t2[0] = t2[0] + 8;
            t2[0] = String(t2[0]);
            t2 = t2[0] + ":" + t2[1] + ":" + t2[2];
            res.data[i].createtime = t1[0] + " " + t2;
          }
        },
      });
    },
    //分页
    changeCount(val) {
      this.pageNum = val;
    },
    changePage(val) {
      this.currPage = val;
      this.created();
    },
    rearch() {
      // console.log(this.form.familystatus, "哈哈哈哈");
      // if (this.form.smartstatus == "" && this.form.homenum == ""||(this.form.familystatus=='')) {
      //   alert("搜索内容为空，请输入搜索内容！");
      // }  else {
      let arr = [];
      this.tableData.forEach((item) => {
        console.log(item.smartstatus, "lllllaxna");

        if (
          this.form.smartstatus == item.smartstatus ||
          this.form.homenum == item.homenum ||
          this.form.familystatus == item.familystatus ||
          this.form.homenum == item.homenum
        ) {
          arr.push(item);
        }
      });
      console.log(arr);
      this.tableData = arr;
      this.page.total = arr.length;
      // }
    },
    ShowStatusChangeSmart(row) {
      this.$confirm("确定更新家具设备状态？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axiosToken({
            url: "/house/updatesmartStatus",
            method: "post",
            data: {
              id: row.id,
              smartstatus: row.smartstatus,
            },
            success: (result) => {
              this.$message({
                showClose: true,
                message: "智能设备状态改变成功",
                type: "success",
              });
              this.getSmartDevice();
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消改变智能状态",
          });
          this.getSmartDevice();
        });
    },
    ShowStatusChangeHouse(row) {
      this.$confirm("确定更新该家居设备状态？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axiosToken({
            url: "/house/updatefamilyStatus",
            method: "post",
            data: {
              id: row.id,
              familystatus: row.familystatus,
            },
            success: (result) => {
              this.$message({
                showClose: true,
                message: "家居设备状态改变成功",
                type: "success",
              });
              this.getHouseDevice();
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消改变家居状态",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.content ::v-deep {
  .top-form {
    margin: 20px 0;

    .time {
      margin-left: 20px;
    }

    .fangnum {
      margin-left: 20px;
    }

    button {
      margin-left: 20px;
    }
  }
}
// 数据居中
::v-deep.el-table--enable-row-transition {
  .el-table__body td.el-table__cell {
    text-align: center;
  }
}
//表头居中
::v-deep.el-table {
  th.el-table__cell > .cell {
    text-align: center;
  }
}
</style>
